<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="UC_style.css">
    <style>
        .main {
            width: 100%;
            height: 800px;
            background: RGB(239,239,239);
            float: left;
        }

        #header2 {
            height: 40px;
            background: white;
        }

        table,
        th,
        td {
            background-color: white;
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            width: 12%;
            height: 10px;
        }

        th {
            font-size: 16px;
            width:8%;
        }

        .had {
            text-align: center;
            height: 500px;
            width: 60%;
            margin: 0px auto;
        }

        .input1 {
            border: none;
            height: 90%;
            width: 100%;
            font-size: 16px;
            outline: none;
        }

        .input2 {
            color: black;
            background-color: RGB(239,239,239);
            font-size: 20px;
            height: 40px;
            width: 100px;
            margin-left: 450px;
            margin-right: 30px;
        }

            .input2:hover {
                background-color: #808080;
            }

        .text {
            border: none;
            height: 50px;
            width: 100%;
            font-size: 16px;
        }

        select {
            border: 0px;
            height: 90%;
            width: 90%;
            outline: none;
        }

        .textarea1 {
            border: 0px;
            width: 100%;
            resize: none;
            height:90%;
            font-size: 16px;
        }
        .textarea2 {
            border: 3px solid #d2d2d2;
            width: 100%;
            resize: none;
            height: 100px;
            font-size: 16px;
        }
        .button1 {
            color: black;
            background-color: RGB(239,239,239);
            font-size: 20px;
            height: 40px;
            width: 100px;
            margin-left: 450px;
            margin-right: 30px;
        }

        h2 {
            text-align: center;
        }

        .black_overlay {
            display: none; /* 此元素不会被显示*/
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001; /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
            opacity: 0.8;
            opacity: .80; /* opacity 属性设置元素的不透明级别。*/
            filter: alpha(opacity=88);
            /* 所有浏览器都支持 opacity 属性。   注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。*/
        }

        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 55%;
            height: 55%;
            padding: 20px;
            border: 10px solid #00ffff;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="main">
        <div id="header2">
            <img src="img/frist.png" alt="Big Boat" width="30" height="30" style=" vertical-align: middle;">
            乘客用车管理 > 个人信息
        </div>
        <br />
        <h2>个人信息</h2>
        <br />
            <table class="had">
                <tr>
                    <th>姓名</th>
                    <td id="name">李四</td>
                    <th>性别</th>
                    <td id="gender">男</td>
                    <th>联系电话</th>
                    <td id="phone">15588886666</td>
                </tr>
                <tr>
                    <th>职位</th>
                    <td id="position">经理</td>
                    <th>工号</th>
                    <td id="number">10086</td>
                    <th>部门</th>
                    <td id="department">销售部</td>
                </tr>
                <tr>
                    <th style="height:60px;">个人简介</th>
                    <td colspan="5"><textarea class="textarea1" id="acc" readonly>无</textarea></td>
                </tr>
                <tr>
                    <th>突出贡献</th>
                    <td colspan="5"><textarea class="textarea1" id="abb" readonly>无</textarea></td>
                </tr>
            </table>
            <br />
            <button style="height:40px;width:80px;font-size:20px;margin-left:500px" onclick="document.getElementById('light').style.display = 'block'; document.getElementById('fade').style.display = 'block';editRow(this)">编辑</button>
            <button style="height:40px;width:80px;font-size:20px;margin-left:300px" onclick=" top.location.href = 'javascript:history.back(-1)'">返回</button>
            <div id="light" class="white_content">
                <form id="editForm">
                    <label for="name">姓名：</label>
                    <input type="text" name="name" readonly><br><br>
                    <label for="gender">性别：</label>
                    <input type="text" name="gender" readonly><br><br>
                    <label for="phone">电话：</label>
                    <input type="tel" name="phone" required><br><br>
                    <label for="position">职位：</label>
                    <input type="text" name="position" readonly><br><br>
                    <label for="number">工号：</label>
                    <input type="text" name="number" readonly><br><br>
                    <label for="department">部门：</label>
                    <input type="text" name="department" readonly><br><br>
                    <label for="acc">个人简介：</label>
                    <textarea name="acc" class="textarea2"></textarea>
                    <label for="acc">突出贡献：</label>
                    <textarea name="abb" class="textarea2" readonly></textarea>
                    <button type="submit" style="height:40px;width:80px;font-size:20px" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">保存</button>
                    <button style="height:40px;width:80px;font-size:20px" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</button>
                </form>                    
            </div>
        <div id="fade" class="black_overlay"></div>
        </div>
        <script>
            function editRow(button) {
                var row = button.parentNode.parentNode;
                var cells = row.cells;

                document.querySelector('input[name="name"]').value = document.getElementById("name").innerHTML;
                document.querySelector('input[name="gender"]').value = document.getElementById("gender").innerHTML;
                document.querySelector('input[name="phone"]').value = document.getElementById("phone").innerHTML;
                document.querySelector('input[name="position"]').value = document.getElementById("position").innerHTML;
                document.querySelector('input[name="number"]').value = document.getElementById("number").innerHTML;
                document.querySelector('input[name="department"]').value = document.getElementById("department").innerHTML;
                document.querySelector('textarea[name="acc"]').value = document.getElementById("acc").innerHTML;
                document.querySelector('textarea[name="abb"]').value = document.getElementById("abb").innerHTML;
                showForm();
                document.querySelector('#editForm').addEventListener('submit', function (event) {
                    event.preventDefault();

                    document.getElementById("name").innerHTML = document.querySelector('input[name="name"]').value;
                    document.getElementById("gender").innerHTML = document.querySelector('input[name="gender"]').value;
                    document.getElementById("phone").innerHTML = document.querySelector('input[name="phone"]').value;
                    document.getElementById("position").innerHTML = document.querySelector('input[name="position"]').value;
                    document.getElementById("number").innerHTML = document.querySelector('input[name="number"]').value;
                    document.getElementById("department").innerHTML = document.querySelector('input[name="department"]').value;
                    document.getElementById("acc").innerHTML = document.querySelector('textarea[name="acc"]').value;
                    document.getElementById("abb").innerHTML = document.querySelector('textarea[name="abb"]').value;
                });
            }

            function showForm() {
                document.querySelector('#editForm').style.display = 'block';
            }

            function hideForm() {
                document.querySelector('#editForm').style.display = 'none';
            }
        </script>
</body>

</html>
